<script setup lang="ts">
import Empty from "./empty.svg?component";
import { delay } from "@pureadmin/utils";
import { ref, onMounted } from "vue";
import {
	getTotalDataApi,
} from "@/api/warehouseApi";



const tableData = ref([])
const loading = ref()
const getInitTable = async () => {
	loading.value = true;
	const res = await getTotalDataApi();
	tableData.value = res.result.warehouseProduct
	delay(300).then(() => {
	  loading.value = false;
	});
}
const tableColumns: TableColumnList = [
    {
      sortable: true,
      label: "ID",
      prop: "warehouseId",
	  width: 80
    },
	{
	  label: "仓库名称",
	  prop: "warehouseName"
	},
	{
	  label: "仓库编码",
	  prop: "warehouseCode"
	},
	{
	  label: "库区名称",
	  prop: "warehouseAreaName"
	},
	{
	  label: "库区编码",
	  prop: "warehouseAreaCode"
	},
	{
	  label: "库位名称",
	  prop: "warehouseLocationName"
	},
	{
	  label: "库位编码",
	  prop: "warehouseLocationCode"
	},
	{
	  sortable: true,
	  label: "库存数量",
	  prop: "warehouseProductTotal"
	},
]
onMounted(()=> {
	getInitTable()
})
</script>

<template>
  <pure-table
    row-key="id"
    alignWhole="center"
    showOverflowTooltip
    :loading="loading"
    :loading-config="{ background: 'transparent' }"
    :data="tableData"
    :columns="tableColumns"
  >
    <template #empty>
      <el-empty description="暂无数据" :image-size="60">
        <template #image>
          <Empty />
        </template>
      </el-empty>
    </template>
  </pure-table>
</template>

<style lang="scss">
.pure-table-filter {
  .el-table-filter__list {
    min-width: 80px;
    padding: 0;

    li {
      line-height: 28px;
    }
  }
}
</style>

<style lang="scss" scoped>
:deep(.el-table) {
  --el-table-border: none;
  --el-table-border-color: transparent;

  .el-empty__description {
    margin: 0;
  }

  .el-scrollbar__bar {
    display: none;
  }
}
</style>
